<template>
  <div class="component_wrap">
    <LssTable
      :columnGroups="columnGroups"
      :uniqueKey="uniqueKey"
      :initialSelectedIds="initialSelectedIds"
      :data="tableData"
      showMove
      border
      ref="lssTableRef"
    >
      <!-- 表格上方操作栏插槽 -->
      <template #header-buttons="{ selectedList, selectedListIds, isSelected }">
        <el-button type="primary" @click="handleBatch(selectedList, selectedListIds, isSelected)">批量操作</el-button>
        <span style="margin-left: 10px">{{ selectedListIds.length }} 项已选中</span>
        <el-button type="primary" @click="handleClear" style="margin-left: 10px">清空选择</el-button>
        <el-button type="primary" @click="handleTest">调用子组件方法</el-button>
      </template>

      <template #expand="scope">
        <!-- 展开行的内容 -->
        <div>
          <p>详细信息：{{ scope.row.sex }}</p>
        </div>
      </template>

      <!-- 统计栏插槽 -->
      <template #header-statistics>
        <el-alert :title="`总数据量：${totalDataCount}`" type="success" :closable="false" />
      </template>

      <!-- 操作列插槽 -->
      <template #operation="{ row }">
        <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
        <el-button type="primary" link @click="handleDel(row)">删除</el-button>
      </template>

      <!-- 多级表头 配置自定义表头插槽 -->
      <template #customHeader="scope">
        <span>一级表头自定义</span>
      </template>

      <template #customSex="scope">
        <span>性别区分</span>
      </template>
    </LssTable>
  </div>
</template>
<script setup lang="ts">
import { ref, h, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 定义多级表头结构
const columnGroups = [
  {
    label: '基本信息',
    headerSlot: 'customHeader', // 自定义表头插槽
    columns: [
      { type: 'selection', width: '55', reserveSelection: true }, // 添加复选框列
      { type: 'index', label: '序号', width: '55' }, // 添加序号列
      { prop: 'name', label: '姓名' },
      { prop: 'age', label: '年龄' },
      { prop: 'addr', label: '地址' },
      { prop: 'sex', label: '性别', headerSlot: 'customSex' },
      { slot: 'operation', label: '操作', fixed: 'right', width: 'auto' }
    ]
  }
]

// 定义表格数据
const tableData = ref([
  { orderNo: '1', name: '张三', age: 25, customField: '自定义内容1', sex: '男', addr: '北京' },
  { orderNo: '2', name: '李四', age: 30, customField: '自定义内容2', sex: '男', addr: '上海' },
  { orderNo: '3', name: '王五', age: 28, customField: '自定义内容3', sex: '男', addr: '天津' }
])

// 定义总数据量
const totalDataCount = ref(tableData.value.length)
const lssTableRef = ref<InstanceType<typeof LssTable> | null>(null)

// 定义唯一标识字段
const uniqueKey = ref('orderNo')

// 定义初始选中的ID列表
const initialSelectedIds = ref(['1', '2'])

onMounted(() => {
  console.log(lssTableRef.value, 'lssTableRef')
})
// 定义操作按钮点击事件
const handleBatch = (selectedList, selectedListIds, isSelected) => {
  console.log('按钮被点击', selectedList, selectedListIds, isSelected('1'))

  ElMessage({
    message: `当前选中数据${JSON.stringify(selectedList)}，选中唯一标识${selectedListIds}，是否选中${isSelected}`,
    type: 'success'
  })
}

const handleClear = () => {
  lssTableRef.value?.handleClear()
}

const handleEdit = (row) => {
  console.log(row, 'row')
  ElMessage({
    message: `当前行${JSON.stringify(row)}`,
    type: 'success'
  })
}
const handleDel = (row) => {
  console.log(row, 'row')
  ElMessage({
    message: `当前行${JSON.stringify(row)}`,
    type: 'success'
  })
}

const handleTest = () => {
  if (lssTableRef.value) {
    // 选中的数据
    lssTableRef.value.setInitialSelectedIds(initialSelectedIds.value, lssTableRef.value.tableRef)
  }
}
</script>

<style lang="scss" scoped></style>
